<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <script language="javascript">
//选中项向左移动或向右移动
function moveLeftOrRight(fromObj,toObj){
    var fromObjOptions=fromObj.options;
    for(var i=0;i<fromObjOptions.length;i++){
        if(fromObjOptions[i].selected){
            toObj.appendChild(fromObjOptions[i]);
            i--;
        }
    }
}
//左边全部右移动，或右边全部左移
function moveLeftOrRightAll(fromObj,toObj){
    var fromObjOptions=fromObj.options;
    for(var i=0;i<fromObjOptions.length;i++){
        fromObjOptions[0].selected=true;
        toObj.appendChild(fromObjOptions[i]);
        i--;
    }
}
//向上移动
function moveUp(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=1;i<theObjOptions.length;i++) {
        if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) {
            swapOptionProperties(theObjOptions[i],theObjOptions[i-1]);
        }
    }
}
//向下移动
function moveDown(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=theObjOptions.length-2;i>-1;i--) {
        if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) {
            swapOptionProperties(theObjOptions[i],theObjOptions[i+1]);
        }
    }
}
//移动至最顶端
function moveToTop(selectObj){
    var theObjOptions=selectObj.options;
    var oOption=null;
    for(var i=0;i<theObjOptions.length;i++) {
        if( theObjOptions[i].selected && oOption) {
            selectObj.insertBefore(theObjOptions[i],oOption);
        }
        else if(!oOption && !theObjOptions[i].selected) {
            oOption=theObjOptions[i];
        }
    }
}
//移动至最低端
function moveToBottom(selectObj){
    var theObjOptions=selectObj.options;
    var oOption=null;
    for(var i=theObjOptions.length-1;i>-1;i--) {
        if( theObjOptions[i].selected ) {
            if(oOption) {
                oOption=selectObj.insertBefore(theObjOptions[i],oOption);
            }
            else oOption=selectObj.appendChild(theObjOptions[i]);
        }
    }
}
//全部选中
function selectAllOption(selectObj){
    var theObjOptions=selectObj.options;
    for(var i=0;i<theObjOptions.length;i++){
        theObjOptions[0].selected=true;
    }
}

/* private function */
function swapOptionProperties(option1,option2){
    //option1.swapNode(option2);
    var tempStr=option1.value;
    option1.value=option2.value;
    option2.value=tempStr;

var tempValSource=option1.valSource;//
option1.valSource=option2.valSource;//
option2.valSource=tempValSource;//

    tempStr=option1.text;
    option1.text=option2.text;
    option2.text=tempStr;
    tempStr=option1.selected;
    option1.selected=option2.selected;
    option2.selected=tempStr;
}

function resetAutoWidth(obj){
    var tempWidth=obj.style.getExpression("width");
    if(tempWidth!=null) {
        obj.style.width="auto";
        obj.style.setExpression("width",tempWidth);
        obj.style.width=null;
    }
}

function checkSelectedOption(){
var ObjSelect = document.frm1.ObjSelect;
var itemField="";
var itemName="";
if(ObjSelect&&ObjSelect.options&&ObjSelect.options.length>0){
var len = ObjSelect.options.length;
for(var j=0; j<len; j++){
itemField += ObjSelect.options[j].value + "|";
itemName += ObjSelect.options[j].text + "|";
}
}
alert(itemField);
alert(itemName);
return;
}

</script> 
</HEAD>

<BODY>
  <!-- MIDDLE BUTTONS -->
<form name=frm1>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="background: #EEEEFF">可选</td>
<td></td>
<td style="background: #EEEEFF">已选</td>
</tr>
<tr>  
<td width="50%" align="center">
<select name="SrcSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)">
            <option value="001">第一项</option>
<option value="002">第二项</option>
<option value="003">第三项</option>
<option value="004">第四项</option>
<option value="005">第五项</option>
<option value="006">第六项</option>
<option value="007">第七项</option>
<option value="008">第八项</option>
<option value="009">第九项</option>
<option value="010">第十项</option>
        </select>

    </td>
    <td width="50px" align="center">
        <input style="width: 40px" align="left" type=button value=">>" title="全部右移" onclick="moveLeftOrRightAll(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input style="width: 40px" align="left" type=button value=">"  title="右移" onclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
        <input style="width: 40px" type=button value="↑" title="上移" onclick="moveUp(document.frm1.ObjSelect)" ><br>
        <input style="width: 40px" type=button value="↓" title="下移" onclick="moveDown(document.frm1.ObjSelect)" ><br>
        <input style="width: 40px" align="left" type=button value="<" title="左移" onclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)" ><br>
        <input style="width: 40px" align="left" type=button value="<<" title="全部左移" onclick="moveLeftOrRightAll(document.frm1.ObjSelect,document.frm1.SrcSelect)" >
    </td>
    <td width="50%" align="center">
        <select name="ObjSelect" size=6 style="height:160px;width:98%" multiple ondblclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)">
        </select>
    </td>
</tr>
<tr>
<td colspan="3"><button name="selectCheck" onclick="checkSelectedOption();">选中查看</button></td>
</tr>
</table>
</form>
</BODY>
</HTML>



